<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>隐蔽致灾表格</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.13.1/theme-chalk/index.css" />
  <style>
    #tableContainer {
      position: relative;
      width: 50vw;
      height: 32vh;
      overflow: hidden;
    }

    #tableHeader {
      position: sticky;
      top: 0;
      background: rgba(23, 43, 86, 0.7);
      z-index: 1;
      display: block;
    }

    #tableBodyContainer {
      height: calc(100% - 38px); /* Adjust this value to the height of your table header */
      overflow-y: auto;
      overflow-x: hidden;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      color: #fff;
    }

    th,
    td {
      border: 1px solid #ccc;
      padding: 6px;
      text-align: center;
    }

    #tableBody tr:nth-child(odd) {
      background-color: rgba(35, 79, 153, 0.7);
    }
  </style>
</head>

<body>
  <div id="tableContainer">
    <div id="tableHeader">
      <table cellspacing="0">
        <thead>
          <tr>
            <th style="width: 8%">采掘队伍</th>
            <th style="width: 10%">采掘工作面</th>
            <th style="width: 8%">河流</th>
            <th style="width: 8%">周边煤矿</th>
            <th style="width: 8%">火烧区</th>
            <th style="width: 8%">烧变区</th>
            <th style="width: 8%">边坡</th>
            <th style="width: 8%">水井</th>
            <th style="width: 8%">断层</th>
            <th style="width: 8%">不良钻孔</th>
            <th style="width: 8%">采空区</th>
            <th style="width: 8%">积水区</th>
            <th style="width: 8%">裂隙带</th>
            <th style="width: 8%">异常区</th>
          </tr>
        </thead>
      </table>
    </div>
    <div id="tableBodyContainer">
      <table cellspacing="0">
        <tbody id="tableBody">
        </tbody>
      </table>
    </div>
  </div>

  <script>
    // 模拟数据
    let tableData = [
      { caijueduiwu: "队伍1", juejinmianname: "工作面1", heliu: "河流1", xiaoyao: "煤矿1", huoshaoqu: "火烧区1", shaobianqu: "烧变区1", bianpo: "边坡1", shuijing: "水井1", duanceng: "断层1", buliangzuankong: "钻孔1", caikongqu: "采空区1", jishuiqu: "积水区1", liexidai: "裂隙带1", yichangqu: "异常区1" },
      { caijueduiwu: "队伍2", juejinmianname: "工作面2", heliu: "河流2", xiaoyao: "煤矿2", huoshaoqu: "火烧区2", shaobianqu: "烧变区2", bianpo: "边坡2", shuijing: "水井2", duanceng: "断层2", buliangzuankong: "钻孔2", caikongqu: "采空区2", jishuiqu: "积水区2", liexidai: "裂隙带2", yichangqu: "异常区2" },
      { caijueduiwu: "队伍3", juejinmianname: "工作面3", heliu: "河流3", xiaoyao: "煤矿3", huoshaoqu: "火烧区3", shaobianqu: "烧变区3", bianpo: "边坡3", shuijing: "水井3", duanceng: "断层3", buliangzuankong: "钻孔3", caikongqu: "采空区3", jishuiqu: "积水区3", liexidai: "裂隙带3", yichangqu: "异常区3" },
      // 更多模拟数据行
    ];

    $(document).ready(function () {
      var $tableBody = $('#tableBody');
      $.each(tableData, function (index, item) {
        var $row = $('<tr>');
        $row.append($('<td style="width: 8%">').text(item.caijueduiwu));
        var $juejinmiannameCell = $('<td style="width: 10%">').text(item.juejinmianname);
        $juejinmiannameCell.click(function () {
          console.log($(this).text());
          $('#tableBody td').css('color', '');
          $(this).css('color', 'yellow');
        });
        $row.append($juejinmiannameCell);
        $row.append($('<td style="width: 8%">').text(item.heliu));
        $row.append($('<td style="width: 8%">').text(item.xiaoyao));
        $row.append($('<td style="width: 8%">').text(item.huoshaoqu));
        $row.append($('<td style="width: 8%">').text(item.shaobianqu));
        $row.append($('<td style="width: 8%">').text(item.bianpo));
        $row.append($('<td style="width: 8%">').text(item.shuijing));
        $row.append($('<td style="width: 8%">').text(item.duanceng));
        $row.append($('<td style="width: 8%">').text(item.buliangzuankong));
        $row.append($('<td style="width: 8%">').text(item.caikongqu));
        $row.append($('<td style="width: 8%">').text(item.jishuiqu));
        $row.append($('<td style="width: 8%">').text(item.liexidai));
        $row.append($('<td style="width: 8%">').text(item.yichangqu));
        $tableBody.append($row);
      });
    });
  </script>
</body>

</html>
